<template>
  <div class="page">
    <slot name="category"></slot>
    <div class="add-form"
         v-if="forms.length>0">
      <form>
        <div v-for="(item,index) in forms"
             :key="index">

          <view class="cu-form-group"
                v-if="item.type==1">
            <view class="title">{{item.title}}</view>
            <input :placeholder="item.placeholder"
                   name="input"
                   v-model:value="item.value"></input>
          </view>

          <view class="cu-form-group align-start"
                v-else-if="item.type==2">
            <view class="title">{{item.title}}</view>
            <textarea maxlength="-1"
                      :disabled="modalName!=null"
                      v-model:value="item.value"
                      :placeholder="item.placeholder"></textarea>
          </view>

          <view class="cu-form-group"
                v-else-if="item.type==3">
            <view class="title">{{item.title}}</view>
            <picker @change="item.change"
                    :value="item.value"
                    :range="item.range">
              <view class="picker">
                {{index>-1?item.range[index]:item.default}}
              </view>
            </picker>
          </view>

          <view class="cu-form-group"
                v-else-if="item.type==4">
            <view class="title">{{item.title}}</view>
            <picker mode="date"
                    :value="item.value"
                    start="2015-09-01"
                    end="2110-09-01"
                    @change="item.change">
              <view class="picker">
                {{item.default}}
              </view>
            </picker>
          </view>

          <button v-else-if="item.type==5"
                  :class="'cu-btn round '+item.class"
                  @click="changeEmit(item.change)">{{item.title}}</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    forms: Array,
  },
  data () {
    return {
      // 失败，对象中接收不了函数（又成功了）
      // 由于父子数据不能双向绑定，只能emit出数据后，父组件用watch监听来修改值，但这样反而更复杂了，即放弃(又还是这个方案了)
      //forms格式 forms格式 type标签类型 1 单行输入框 2 多行输入框 3 picker采集器 4 时间选择器 5 按钮 之后即该类型所需数据
      //   forms: [{ "type": 1, "title": "标题", "placeholder": "新的分类名", "value": "绑定数据" },
      //   { "type": 2, "title": "标题", "placeholder": "新的分类名", "value": "绑定数据" },
      //   { "type": 3, "title": "标题", "change": "更改事件", "value": "绑定数据", "range": "迭代数据", "default": "初始显示值" },
      //   { "type": 4, "title": "标题", "change": "更改事件", "value": "绑定数据", "default": "初始显示值" },
      //   { "type": 5, "title": "标题", "change": "更改事件" ,"class":"样式"}
      //   ]
      item: "",
      index: -1
    }
  },
  methods: {
    changeEmit: function (e) {
      console.log('e', e);
      this.$emit('emitEvent', this.forms)
      this.$emit(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-form {
  .cu-form-group .title {
    min-width: calc(4em + 15px);
  }
  // textarea {
  //   display: flex;
  //   align-items: center;
  //   transform: translateY(-11px);
  // }
  button {
    width: 100%;
    height: 40px;
    font-size: 17px;
    margin-top: 10px;
  }
}
</style>